<template>
  
<div class="text-container">
  <transition class="inner-container" name="slide" mode="out-in">
    <p class="text2" :key="newsText.id">{{newsText.val}}</p>
    asddddddddddddddddddddddd
  </transition>
</div>
</template>

<script>
export default {
  components: {},
  props: ['showSVipPopup'],
//   model: {
//       prop: 'showSVipPopup',
//       event: 'svipPopupEvent'
//   },
  data() {
    return {
      news: [
        { id: "1", value: "你好啊的的" },
        { id: "2", value: "我是可以滚动的文本啊" },
        { id: "3", value: "大家大家都" }
      ],
      number: 0,
    };
  },
  watch: {},
  computed: {
    newsText() {
      return {
        id: this.number,
        val: this.news[this.number].value
      }
    },
    startMove() {
      this.number = 0;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.number < this.unreadNewsArr.length - 1) {
          this.number += 1;
        } else {
          this.number = 0;
        }
      }, 5000);
    }
  },
  created() {},
  mounted() {},

  methods: {},
};
</script>

<style scoped lang="less">
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s linear;
}
.slide-leave-to {
  transform: translateY(-60px);
}
.slide-enter {
  transform: translateY(60px);
}
</style>
